*{box-sizing: border-box;}
/*利用标记名作为选择器*/
body{
    background-image: url(../img/pageBG.jpg);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
}
/*利用类名作为选择器*/
.container{
    width:477px;height:479px;
    background-image: url(../img/mainBG.png);
    margin:0px auto;
    margin-top:100px;
}
    .avatar{
        text-align: center;
        padding-top:30px;
    }
    /*两个选择器名称中间用空格分隔，表示上下级关系*/
    .avatar img{border-radius: 50%;transition: 1s;cursor:pointer;}
    /*利用hover伪类作为选择器，设置鼠标停留在该元素上的样式*/
    .avatar img:hover{transform: rotate(360deg) scale(1.2);opacity: 0.5;}
    .regContainer{
        width:300px;
        margin:0px auto;
        margin-top:30px;
    }
    input{
        height:30px;outline:none;width:100%;
        background-repeat: no-repeat;
        background-size: contain;
        border:#c7c6c6 1px solid;
        font-size:18px;padding-left:40px;
    }
    /*利用标记的属性名作为选择器*/
    input[type="text"]{
        background-image: url(../img/iconID.png);        
    }
    input[type="password"]{
        background-image: url(../img/iconPWD.png);        
    }
    input[type="checkbox"]{
        width:20px;height:20px;
        vertical-align: middle;
    }
    form div{margin-bottom:10px;}
    button{
        width:100%;height:40px;border:#f16310 3px solid;
        background-color: #f5762d;color:#ffffff;
        cursor: pointer;font-size:18px;
    }
    button:hover{
        background-color: #e26116;
    }
    .tbNickName{
        width:268px;background-image: none!important;padding-left:5px;
    }
    i{
        width:32px;height:30px;background-color: #9e9e9e;vertical-align: top;
        text-align: center;padding-top:8px;font-size:12px!important;color:#ffffff;
    }
    
